<template>
  <div class="Header" >
      <div class="firstrow">
        <el-row  :style="{width:$store.state.screenWidth+'px'}">
          <el-col :span="10">
           <router-link to="/">信息门户</router-link>
           <router-link to="/">师大新闻</router-link>
           <router-link to="/">联系校领导</router-link>
           <router-link to="/">教室邮箱</router-link>
           <router-link to="/">学生邮箱</router-link>
           <router-link to="/">师大云盘</router-link>
          </el-col>
          <el-col :span="4" >  <router-link to="/" style="background-color: transparent;position: absolute;z-index: 10;" >
            <img src="@/assets/img/logo1.png" alt="" width="170">
          
          </router-link></el-col>
          <el-col :span="10">
            <router-link to="/">师大新闻</router-link>
            <router-link to="/">Enhlish Version</router-link>
            <router-link to="/">校友之家</router-link>
            <router-link to="/">校长邮箱</router-link>
            <router-link to="/" >珠海校区</router-link>
            <router-link  to="/search" style="padding-top: 2px;height: 38px;"> 
            <el-icon ><Search /></el-icon>
            </router-link>
          </el-col>
        </el-row>
  </div>
    <div class="secondrow"  >
      <el-row :style="{width:$store.state.screenWidth+'px'}">
        <el-col :span="10">
          <el-menu
    
    class="el-menu-demo"
    mode="horizontal"
    router
    @select="handleSelect"
  >
    <el-sub-menu index="1">
      <template #title>学校概况</template>
      <el-menu-item index="1-1">item one</el-menu-item>
      <el-menu-item index="1-2">item two</el-menu-item>
      <el-menu-item index="/about">item three</el-menu-item>
      <el-sub-menu index="1-4">
        <template #title>item four</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
        <el-menu-item index="1-4-2">item two</el-menu-item>
        <el-menu-item index="1-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>组织机构</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>学部系统</template>
      <el-menu-item index="3-1">item one</el-menu-item>
      <el-menu-item index="3-2">item two</el-menu-item>
      <el-menu-item index="3-3">item three</el-menu-item>
      <el-sub-menu index="3-4">
        <template #title>item four</template>
        <el-menu-item index="3-4-1">item one</el-menu-item>
        <el-menu-item index="3-4-2">item two</el-menu-item>
        <el-menu-item index="3-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>

    <el-menu-item index="4">科学研究</el-menu-item>
  </el-menu>
        </el-col>
        <el-col :span="4"><router-link to="/" style="background-color: transparent;" >
            <img src="@/assets/img/logo_bg.png" alt=""  style="margin-top: 40px;margin-left: -40px;">
          
          </router-link></el-col>
  <el-col :span="10">
          <el-menu
    
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    router
  >
    <el-sub-menu index="1">
      <template #title>招生就业</template>
      <el-menu-item index="1-1">item one</el-menu-item>
      <el-menu-item index="1-2">item two</el-menu-item>
      <el-menu-item index="1-3">item three</el-menu-item>
      <el-sub-menu index="1-4">
        <template #title>item four</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
        <el-menu-item index="1-4-2">item two</el-menu-item>
        <el-menu-item index="1-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>人才招聘</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>合作交流</template>
      <el-menu-item index="3-1">item one</el-menu-item>
      <el-menu-item index="3-2">item two</el-menu-item>
      <el-menu-item index="3-3">item three</el-menu-item>
      <el-sub-menu index="3-4">
        <template #title>item four</template>
        <el-menu-item index="3-4-1">item one</el-menu-item>
        <el-menu-item index="3-4-2">item two</el-menu-item>
        <el-menu-item index="3-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>

    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>
        </el-col>
        
      </el-row>
    </div>
 
  </div>
</template>

<script>
export default {
  name: 'HeaderCom',
  methods:{
   handleSelect(val){
    alert(val)
   }
  }
}
</script>


<style scoped lang="less">
div.Header{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  .firstrow{
   height: 40px;
   background-color: rgb(6, 64, 112);
  .el-row{
    margin: auto;
    .el-col{
     
      display: flex;
      justify-content: space-around;
      a,a:visited{
        text-decoration: none;
        color: aliceblue;
        line-height: 40px;
        height: 40px;
        padding: 0px 5px;
        &:hover{
          background-color: aliceblue;
          color: rgb(6, 64, 112);
        }
      }
    }
    

  }
   
  }
  .secondrow{
    height: 40px;
    background-color: rgb(255, 255, 255);
    box-shadow: 1px 5px 16px 5px rgba(4, 45, 78, 0.1); 
    .el-row{
      
      margin: auto;
      .el-col{
       
        .el-menu{
          height: 40px;
          border-bottom: none;
          .el-sub-menu{
            .el-menu-item{
         
          }
          }
          
        }
      }

    }
  }
}
</style>
